<!--头像+姓名条(横版)-->
<template>
  <section class="horizontal-name" :style="{ 'margin-top': top,'padding-left':spacing,'padding-right':spacing}">
    <!--    <section v-if="moduleName||showMore" class="moduleName-box">-->
    <!--      <span class="moduleName">{{ moduleName }}</span>-->
    <!--      <span v-show="showMore" class="more">查看更多</span>-->
    <!--    </section>-->
    <cell-title
      v-if="option.isShowModuleName"
      :title="moduleName"
      :hide-desc="option.isMore ==='2'"
      :option="option"
      :style="{
        'background-color': option.backgroundColor,
        'border-radius':
          option.radiusSize + ' ' + option.radiusSize + ' 0 0',
        'padding': `0 ${spacing}`
      }"
    />
    <section
      class="horizontal-name-container"
      :style="{
        'background-color': bgcolor,
        'background-image': `url(${imgBg})`,
        'background-repeat': 'no-repeat',
        'background-size': '100% 100%',
        'background-position': 'top center',
      }"
    >
      <section v-for="(item,index) in list" :key="index" class="horizontal-name-item">
        <section class="img-box">
          <van-image :src="setImgPath(item.headImg, item.headImgURL)" :fit="imgType">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>
              <img src="../../images/base/default-placeholder.png" alt="">
            </template>
          </van-image>
        </section>
        <section class="right">
          <section class="title etc">{{ item.name || '' }}</section>
          <section class="subtitle clamp2">{{ item.technicalTitle || '' }}</section>
          <section v-if="item.synopsis" class="des clamp2">{{ item.synopsis|| '' }}</section>
        </section>
      </section>
    </section>
  </section>
</template>
<script>
import mixins from './../mixins'
import mixin from './mixins'
import CellTitle from './cellTitle'
export default {
  name: 'HorizontalName',
  components: { CellTitle },
  mixins: [mixins, mixin],
  inject: ['pageVar'],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      defaultList: [
        {
          name: '姓名',
          headImg: '',
          headImgURL: '',
          technicalTitle: '职称',
          synopsis: '简介'
        },
        {
          name: '姓名',
          headImg: '',
          headImgURL: '',
          technicalTitle: '职称',
          synopsis: '简介'
        },
        {
          name: '姓名',
          headImg: '',
          headImgURL: '',
          technicalTitle: '职称',
          synopsis: '简介'
        }
      ],
      pageSize: 4,
      souMold: '',
      classLabel: ''
    }
  },
  computed: {
    moduleName() {
      if (this.option.moduleName.startsWith('${')) {
        return this.isInitData ? this.varInfo[this.option.moduleName] : this.pageVar().length > 0 ? this.pageVar().find(item => { return item.code === this.option.moduleName })?.value : ''
      } else {
        return this.option.moduleName || ''
      }
    },
    imgBg() {
      return this.option.imgBg
    },
    bgcolor() {
      return this.option.bgcolor
    }
  },
  async created() {
    if (this.isInitData) {
      this.pageSize = this.option.pageSize || 4
      this.souMold = this.option.souMold
      this.classLabel = this.option.classLabel
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    setData(result) {
      this.list = result.dataList?.data?.rows || []
      this.$nextTick(() => {
        this.clampText()
      })
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';

.horizontal-name {
  margin: 0 auto;
  position: relative;
  width: rem(750);

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .moduleName-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: rem(24) 0;

    .moduleName {
      color: #222;
      font-weight: bold;
      font-size: rem(32);
    }

    .more {
      color: #999999;
      font-size: rem(24);
    }
  }

  .horizontal-name-container {
    background-color: #fff;
    border-bottom-right-radius: rem(16);
    border-bottom-left-radius: rem(16);

    .horizontal-name-item {
      padding: rem(12) rem(24);
      display: flex;
      position: relative;

      &:not(:last-child) {
        margin-bottom: rem(20);
      }

      &:not(:last-child):after {
        content: '';
        display: block;
        height: 1px;
        background-color: #EEEEEE;
        position: absolute;
        bottom: 0;
        right: rem(24);
        left: rem(24+158);
      }

      .img-box {
        width: rem(132);
        height: rem(132);
        border-radius: 50%;
        overflow: hidden;
        margin-right: rem(26);

        .van-image {
          width: 100%;
          height: 100%;

          .van-image__error {
            > img {
              width: rem(120);
              height: rem(120);
            }
          }
        }
      }

      .right {
        flex: 1;

        .title {
          color: #333;
          font-size: rem(30);
          font-weight: bold;
        }

        .subtitle {
          margin-top: rem(21);
          color: #667280;
          font-size: rem(24);
        }

        .des {
          color: #999999;
          font-size: rem(24);
          margin-top: rem(21);
        }
      }
    }
  }
}

</style>
